<template>
  <div>
    <Echart
            :options="options"
            id="bottomLeftChart"
            height="4.8rem"
            width="100%"
    ></Echart>
  </div>
</template>

<script>
    import Echart from '@/common/echart'
    import eventBus from "@/views/event-bus"
    import dataTool  from 'echarts/extension/dataTool'
    //let dataTool = require('echarts/dist/extension/dataTool.js')

    export default {
        data() {
            return {
                options: {},
                info: {
                    btroptimizalValues: [],
                    btrinferenceValues: [],
                }
            };
        },
        components: {
            Echart,
        },
        props: {},
        mounted() {
            eventBus.$on('data-figure', info => {
                this.info = info;
            })
        },
        watch: {
            info: {
                handler() {
                    let temp = new Array();
                    temp[0] = this.info.btrinferenceValues;
                    temp[1] = this.info.btroptimizalValues;
                    let box_data = dataTool.prepareBoxplotData(temp);
                    this.options = {
                        title:
                            {
                                text: '',
                                left: 'center',
                                textStyle: {
                                    fontSize: 15
                                }
                            },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['控制前', '控制后'],
                            boundaryGap: true,
                            nameGap: 14,
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: true
                            },
                            scale: true
                        },
                        series: [
                            {
                                name: '111',
                                type: 'boxplot',
                                clickable:false,
                                data: box_data.boxData,
                                tooltip: {
                                    formatter: function (param) {
                                        return [
                                            '上限: ' + parseFloat(param.data[5]).toFixed(4),
                                            '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                                            '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                                            '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                                            '下限: ' + parseFloat(param.data[1]).toFixed(4)
                                        ].join('<br/>');
                                    }
                                }
                            },
                            {
                                name: '离群值',
                                type: 'scatter',
                                data: box_data.outliers
                            }
                        ]
                    }
                },
                immediate: true,
                deep: true
            },
        },
    }
</script>